<template>
  <el-dialog :visible="showDialog" top="2vh" @close="handleClose">
    <template #title>
      <h2 style="text-align: center">
        😏🥶🤬🤢🥸👿👻👽👾🤖💩😾🙈🦓🐴🦄🐔🌭🍟🥨🥯🥖🧑‍🎄🎅
      </h2>
      <h2 style="text-align: center">题目预览</h2>
    </template>
    <el-row>
      <!-- 【题型】 -->
      <el-col v-if="subjectData.questionType == 1" :span="6">
        【题型】: 简单
      </el-col>
      <el-col v-else-if="subjectData.questionType == 2" :span="6">
        【题型】: 普通
      </el-col>
      <el-col v-else :span="6"> 【题型】: 困难 </el-col>

      <el-col :span="6"> 【编号】: {{ subjectData.id }} </el-col>
      <el-col v-if="subjectData.questionType == 1" :span="6">
        【难度】: 简单
      </el-col>
      <el-col v-if="subjectData.questionType == 2" :span="6">
        【难度】: 一般
      </el-col>
      <el-col v-if="subjectData.questionType == 3" :span="6">
        【难度】: 困难
      </el-col>
      <el-col v-if="subjectData.questionType == 1" :span="6">
        【标签】: {{ subjectData.tags }}
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6"> 【学科】: {{ subjectData.subject }} </el-col>
      <el-col :span="6"> 【目录】: {{ subjectData.catalog }} </el-col>
      <el-col :span="6"> 【方向】: {{ subjectData.direction }} </el-col>
    </el-row>
    <el-divider />
    <p>题干:</p>
    <p style="color: blue" v-html="subjectData.question" />
    <p v-if="subjectData.questionType == 1" style="margin: 20px 0">
      单选题 选项：（以下选中的选项为正确答案）
    </p>
    <p v-if="subjectData.questionType == 2" style="margin: 20px 0">
      多选题 选项：（以下选中的选项为正确答案）
    </p>
    <p v-if="subjectData.questionType == 3" style="margin: 20px 0">
      简答题 选项：（以下选中的选项为正确答案）
    </p>
    <el-row>
      <el-radio />
    </el-row>
    <el-row>
      <el-radio />
    </el-row>

    <el-row>
      <el-radio />
    </el-row>
    <el-divider />
    【参考答案】：<el-button type="success" size="small">
      <a href="https://www.bilibili.com/video/BV13U4y1v7KC/">视频解析</a>
    </el-button>

    <el-divider />
    <el-row>
      <p>
        【题目答案解析】:<span
          style="color: green"
          v-html="subjectData.answer"
        />
      </p>
    </el-row>
    <el-divider />
    <el-row>
      <p v-html="'【题目备注】：' + subjectData.remarks" />
    </el-row>
    <template #footer>
      <el-button type="primary" @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'InfoCom',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    subjectData: {
      type: Object,
      required: true
    }
  },
  created() {
    console.log('学科详情', this.subjectData)
  },
  methods: {
    // 关闭弹窗
    handleClose() {
      this.$emit('add-success')
      this.$emit('closeDialog')
    }
  }
}
</script>

<style>
</style>
